<template>
  <div class="repairs-detail">
    <head-top head-title="报修详情" goBack="true"></head-top>
    <section class="detail">
      <div class="top border-bottom">
        <img :src="list.head_pic || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'" alt="">
        <span class="nick-name">{{list.nickname}}</span>
        <a :href="'tel:' + list.phone" class="tel">{{list.phone}}</a>
      </div>
      <desc-pic :list="list"></desc-pic>
      <div class="address_show">
        <span>地址：{{list.address}}</span>
        <span>阅读量：{{list.reading_amount}}</span>
      </div>
      <div class="pic">
        <div class="call">
          <a v-on:click="phoneCall(list.phone)">立即联系</a>
        </div>
      </div>
    </section>
    <div class="split"></div>
    <comment :list="list" :lists="lists" @passMethods="_getRepairsDetail"></comment>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import comment from '../common/comment.vue'
  import descPic from '../common/desPic.vue'
  import { getRepairsDetail } from '../../api/publishList.js'

  export default {
    data () {
      return {
        lists: [],
        list: {}
      }
    },
    mounted () {
      this._getRepairsDetail()
    },
    methods: {
      phoneCall: function (msg) {
        window.location.href = `tel://${msg}`
      },
      _getRepairsDetail () {
        getRepairsDetail(this.$route.params.id).then(res => {
          if (res.code === 200) {
            this.lists = res.data.comment
            this.list = res.data.repair
          }
        })
      }
    },
    components: {
      headTop,
      comment,
      descPic
    }

  }
</script>

<style lang="scss">
  @import '../../common/sass/index.scss';

  .repairs-detail {
    background-color: #fff;
    width: 100%;
    .detail {
      padding-top: 40px;
      margin: 0 10px;
      margin-bottom: 10px;
      .top {
        height: 60px;
        line-height: 60px;
        img {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 10px;
        }
        .nick-name {
          font-size: 15px;
        }
        .tel {
          float: right;
          color: #0078de;
        }
      }
      .address_show {
        width: 100%;
        height: 20px;
        // border-top: 1px solid #f2f2f2;
        /*padding-top: 5px;*/
        span:first-child {
          line-height: 20px;
          padding-left: 10px;
          color: #666;
          float: left;
        }
        span:last-child {
          line-height: 20px;
          padding-left: 10px;
          color: #666;
          float: right;
        }
      }
      .pic {
        width: 100%;
        padding-top: 10px;
        .desc {
          line-height: 26px;
        }
        .pic_img {
          width: 100%;
          img {
            width: 24%;
          }
        }
        .time-answer {
          display: flex;
          justify-content: space-between;
          height: 32px;
          line-height: 32px;
          color: rgb(153, 153, 153);
          .answer {
            margin-top: 10px;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: 12px 12px;
            background-repeat: no-repeat;
            @include bgimg('../message/images/pinglun')
          }
        }
        .call {
          width: 100%;
          height: 38px;
          font-size: 15px;
          line-height: 38px;
          text-align: center;
          color: #ffffff;
          background-color: #0078de;
          a {
            display: inline-block;
            width: 100%;
            height: 38px;
          }
        }
      }
    }
    .split {
      height: 10px;
      background-color: #f2f2f2;
    }
  }
</style>
